<template>
  <view>
    <!-- 头部 -->
    <view class="position-relative d-flex a-center animated fadeIn faster" style="height: 320rpx;">
      <!-- 加载动画 -->
      <view v-if="loading" class="loading-spinner">加载中...</view>
      
      <!-- 消息列表 -->
      <view
        @click="navigate('msg-list', true)"
        class="iconfont icon-gouwuche position-absolute text-white"
        style="font-size: 50rpx; top: 75rpx; right: 20rpx; z-index: 100;"
      ></view>

      <!-- 背景图 -->
      <image src="../../static/images/beijing-profile.jpg" style="height: 320rpx; width: 100%;"></image>

      <!-- 用户信息 -->
      <view class="d-flex a-center position-absolute left-0 right-0" style="bottom: 50rpx;">
        <!-- 用户头像 -->
        <image
          :src="userInfo.avatar || '/static/images/xiaoxin.jpg'"
          style="height: 145rpx; width: 145rpx; border: 5rpx solid;"
          class="rounded-circle border-light ml-4"
        ></image>
        <!-- 用户昵称或登录提示 -->
        <view class="ml-2  font-md" @click="openLogin" style="color: aqua;font-size: 20px;">
          {{ loginStatus ? userInfo.userName : '登录/注册' }}
        </view>


        <!-- 会员积分 -->
        <view
          class="d-flex a-center j-center a-self-end ml-auto px-2"
          style="height: 70rpx; background: #FFD43F; color: #CC4A00; border-top-left-radius: 40rpx; border-bottom-left-radius: 40rpx;"
        >
          <view class="line-h iconfont icon-huangguan mr-1"></view>
          会员积分 0.00
        </view>
      </view>
    </view>

    <!-- 订单管理 -->
        <card>
          <view slot="title" class="d-flex a-center j-sb w-100">
            <text class="font-md font-weight">我的订单</text>
            <view class="text-secondary font ml-auto" @click="navigate('order', false)">
              全部订单 <text class="iconfont icon-gouwuche font"></text>
            </view>
          </view>
          <view class="d-flex a-center">
            <view
              class="flex-1 d-flex flex-column a-center j-center py-3"
              hover-class="bg-light-secondary"
              v-for="(item, index) in orders"
              :key="index"
              @click="openOrder(item)"
            >
              <!-- 显式设置图标颜色 -->
              <view class="iconfont line-h" :class="item.icon" style="color: #000;"></view>
              <view>{{ item.name }}</view>
            </view>
          </view>
        </card>
    <!-- 分割线 -->
    <divider></divider>

    <!-- 功能列表 -->
    

    <uni-list-item
      showExtraIcon
      leftIconStyle="color: #FCBE2D;"
      leftIcon="icon-qianbao"
      title="我的钱包"
    ></uni-list-item>
    <uni-list-item
      showExtraIcon
      leftIconStyle="color: #FA6C5E;"
      leftIcon="icon-shoucang"
      title="我的收藏"
    ></uni-list-item>
    <uni-list-item
      showExtraIcon
      leftIconStyle="color: #9ED45A;"
      leftIcon="icon-pinglun"
      title="我的评论"
    ></uni-list-item>


   






    <!-- 分割线 -->
    <divider></divider>

    <!-- 设置 -->
    <uni-list-item
      showExtraIcon
      leftIconStyle="color: #808C98;"
      leftIcon="icon-shezhizhongxin"
      title="更多设置"
      @click="navigate('user-path-list')"
    ></uni-list-item>
  </view>
</template>


<script>
import divider from "@/components/common/divider.vue";
import loading from "@/common/mixin/loading.js";
import card from "@/components/common/card.vue";
import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue";
import axios from 'axios';  // 引入 axios 库

export default {
  components: {
    card,
    uniListItem,
	divider
  },
  data() {
    return {
      loading: false,  // 用于控制加载动画的显示
      orders: [
        { name: "待付款", icon: "icon-daifukuan", index: 1 },
        { name: "待收货", icon: "icon-daishouhuo", index: 2 },
        { name: "待评价", icon: "icon-gouwuche_daipingjia", index: 3 },
        { name: "待退修", icon: "icon-daishouhou", index: 4 },
      ],
      loginStatus: false,
      userInfo: {},  // 用户信息
    };
  },
  computed: {
    // 可以添加 Vuex 状态映射
  },
  methods: {
    // 跳转页面
    navigate(path, check = false) {
      if (!path) return;
      if (check && !this.loginStatus) {
        return this.openLogin();
      }
      uni.navigateTo({
        url: `/pages/${path}/${path}`,
      });
    },

    // 打开登录页面
    openLogin() {
      if (!this.loginStatus) {
        uni.navigateTo({
          url: "../login/login",
        });
      }
    },
	


    // 打开订单页面
    openOrder(item) {
      if (item.index) {
        this.navigate('/pages/order/order?tabIndex=' + item.index);
      }
    },

    // 获取用户信息（从后端 API）
    // 获取用户信息（从后端 API）
    async getUserInfo() {
      this.loading = true; // 显示加载动画
      const token = uni.getStorageSync('token'); // 获取本地存储的 token
      if (!token) {
        this.loading = false;
        return;
      }
    
      try {
		const token = localStorage.getItem('token');
        const response = await axios.get('http://localhost:8083/api/user/getuserinfo', {
          headers: {
            token:token // 将 token 添加到请求头中
          },
        });
        console.log(response.data.data)
        if (response.data.code === 1) {
          this.userInfo = response.data.data;
          this.loginStatus = true;
        } else {
          this.loginStatus = false;
        }
      } catch (error) {
        console.error("获取用户信息失败", error);
        this.loginStatus = false;
      } finally {
        this.loading = false; // 隐藏加载动画
      }
    }

  },

  mounted() {
    this.getUserInfo();  // 页面加载时获取用户信息
  },
};

</script>

<style>



/* 自定义样式 */
.bg-light-secondary {
  background-color: #f5f5f5;
}
.loading-spinner {
  text-align: center;
  font-size: 20rpx;
  color: #999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

</style>